<template>
  <div>
    <Dialog :title="formData.id ? '编辑静态客群' : '新建静态客群'" v-model="isDialog" width="500px" :close-on-press-escape="false"
      :close-on-click-modal="false" :before-close="closeGroup" @open="openDialog">
      <el-form ref="formData" :model="formData" :rules="rules" label-width="100px">
        <el-form-item label="所属机构" prop="insId">
          <el-select v-model="formData.insId" placeholder="请选择所属机构" clearable style="width: 100%">
            <el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in orgList" />
          </el-select>
        </el-form-item>
        <el-form-item label="客群名称" prop="name">
          <el-input type="text" placeholder="请输入客群名称" v-model.trim="formData.name" maxlength="20" show-word-limit>
          </el-input>
        </el-form-item>

        <el-form-item label="选择分组" prop="categoryId">
          <TreeSelect class="_tree_select" v-model="formData.categoryId" :treeSelectData="treeSelectData" :treeProps="{
            label: 'name',
            disabled: (data) => {
              return Boolean(data.nodeType && !data.children);
            },
          }" placeholder="请选择分组"></TreeSelect>

        </el-form-item>

        <!-- <el-form-item label="客群标识" prop="symbol" v-if="formData.id">
          <el-input type="text" placeholder="请输入客群标识" v-model="formData.symbol" maxlength="50" :show-word-limit="true">
          </el-input>
        </el-form-item> -->
        <el-form-item label="客群用途" prop="remark">
          <el-input type="textarea" placeholder="请输入客群用途" v-model="formData.remark" maxlength="50" show-word-limit>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeGroup('close')">取 消</el-button>
          <!-- <el-button
            v-show="formData.type == 1"
            :disabled="formData.id"
            type="primary"
            @click="dynamicDialog = true"
            >创建规则</el-button
          > -->
          <el-button type="primary" @click="formValidate">确 定</el-button>
        </span>
      </template>
    </Dialog>
    <!-- <Dynamic
      :isDialog="dynamicDialog"
      :conditionalOriginal="formData.conditionalOriginal"
      @cancel="cancel"
      @confirm="confirm"
    ></Dynamic> -->
  </div>
</template>

<script>
import CustomerApi from "@/api/customerApi";
import { ElMessage } from "element-plus";
import { allOrg } from "@/api/orgManage";
// import Dynamic from "./dynamic.vue";
import TreeSelect from "@/components/TreeSelect/TreeSelect.vue";
export default {
  // components: { Dynamic },
  props: {
    isDialog: {
      require: false,
      type: Boolean,
      default: () => {
        return false;
      },
    },
    groupData: {
      require: false,
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // dynamicDialog: false,
      formData: {
        insName: "",
        type: 0,
        syncStatus: 1,
        insId: "",
        name: "",
        symbol: "",
        remark: "",
        conditionalOriginal: "",
        categoryId: "",
      },
      treeSelectData: [],
      orgList: [],
      rules: {
        insId: [{ required: true, message: "请输入所属机构", trigger: "blur" }],
        name: [{ required: true, message: "请输入客群名称", trigger: "blur" }],
        symbol: [{ required: true, message: "请输入客群标识", trigger: "blur" }],
        categoryId: [{ required: true, message: "请选择分组", trigger: "blur" }],
      },
    };
  },
  methods: {
    openDialog() {
      this.getCustomersGroupTree()
      if (this.groupData.id || this.groupData.isCopy) {
        this.formData = this.groupData;
        if (this.groupData.isCopy) {
          this.formData.symbol = "";
        }
      }
    },
    formValidate() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.addUserGroup();
        } else {
          return false;
        }
      });
    },
    async getOrgList() {
      const rs = await allOrg();
      if (rs.code == 200) {
        this.orgList = rs.payload;
      }
    },
    // 添加客群
    async addUserGroup() {
      let params = JSON.parse(JSON.stringify(this.formData));
      let rs = await CustomerApi.addUserGroup(params);
      if (rs.code == 200) {
        ElMessage.success(this.formData.id ? "编辑静态客群成功" : "添加静态客群成功");
        this.closeGroup();
      }
    },

    async getCustomersGroupTree() {
      let rs = await CustomerApi.getCustomersGroupTree({});
      if (rs.code === 200) {
        this.treeSelectData = rs.payload;
      }
    },
    // confirm(val) {
    //   this.formData.conditionalOriginal = JSON.stringify(val);
    //   this.cancel();
    // },
    // cancel() {
    //   this.dynamicDialog = false;
    // },
    closeGroup(close) {
      this.$emit("closeGroup", false, close);
      this.$refs.formData.resetFields();
      this.formData = {
        insId: "",
        name: "",
        symbol: "",
        type: 0,
        syncStatus: 1,
        remark: "",
        conditionalOriginal: "",
        categoryId: "",
      };
    },
  },
  mounted() {
    this.getOrgList();
  },
};
</script>

<style lang="scss" scoped>
._tree_select {
  width: 100%;
}
</style>
